* {
    padding: 0;
    margin: 0;
}

body {
    background-image: url(../img/宠物首页背景图片.jpeg);
    width: 100%;
    background-size: 2560px;
}

html {
    height: 100%;
}

.text-index img {
    position: absolute;
    left: 50%;
}

.text-index img:first-child {
    transform: translateX(-134px);
    top: 30%;
    animation: text-first 1s;
}

.text-index img:last-child {
    transform: translateX(-154.5px);
    top: 36%;
    animation: text-last 1s;
}





@keyframes text-last {
    0% {
        transform: translateX(-154.5px) scale(1);
    }

    20% {
        transform: translateX(-154.5px) scale(0.1);
    }

    40% {
        transform: translateX(-154.5px) scale(1.4);
    }

    70% {
        transform: translateX(-154.5px) scale(0.8);
    }

    100% {
        transform: translateX(-154.5px) scale(1);
    }
}

@keyframes text-first {
    0% {
        transform: translateX(-134px) scale(1);
    }

    20% {
        transform: translateX(-134px) scale(0.1);
    }

    40% {
        transform: translateX(-134px) scale(1.4);
    }

    70% {
        transform: translateX(-134px) scale(0.8);
    }

    100% {
        transform: translateX(-134px) scale(1);
    }
}



.could img:first-child {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 15%;
    margin-left: 300px;
    animation: could 2s infinite alternate;
}

.could img:last-child {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -500px;
    animation: could 2s 1s infinite alternate;
}

@keyframes could {
    100% {
        transform: translateX(50px);
    }
}